import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  Alert,
} from "react-native";
import PageContainer from "@/components/PageContainer";
import React, { useEffect, useState } from "react";

import { useRouter } from "expo-router"; // 引入 useRouter
import useAppStateChange from "@/hooks/useAppStateChange";
import { queryMemberCertificationFnAPi } from "./api";
import { ToastAPI } from "@/components/Toast";
import { useTranslation } from "react-i18next";

export default function Authentication() {
  const { t } = useTranslation();

  const router = useRouter(); // 获取路由对象
  const appState = useAppStateChange();
  const [certificationStatus, setCertificationStatus] = useState<any>(null);
  useEffect(() => {
    queryMemberCertificationFnAPi().then((res: any) => {
      setCertificationStatus(
        Array.isArray(res.result) && res.result.length === 0 ? null : res.result
      );
    });
  }, []);
  const status: any = {
    "0": t("authIndex.pending_review"),
    "1": t("authIndex.rejected_certification"),
    "2": t("authIndex.approved_certification"),
  };
  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="items-center flex-row h-[46px]">
          <TouchableOpacity onPress={() => router.back()}>
            <Image
              source={require("@/assets/images/return-left.png")}
              className="w-[18px] h-[18px]"
            />
          </TouchableOpacity>
          <View className="flex-1 flex-row justify-center">
            <Text className="text-[#fff] text-[18px]">
              {t("authIndex.identity_authentication")}
            </Text>
          </View>
          <View className="w-[18px]"></View>
        </View>
        <View className="mt-[22px]">
          <TouchableOpacity
            onPress={() => {
              if (
                !certificationStatus ||
                Number(certificationStatus[0].certificationStatus) === 1
              ) {
                router.push("/authentication/FoundationCertification");
              }
              return;
            }}
          >
            <View className="bg-[#1C1C1E] p-[18px] rounded-[10px] flex-row justify-between gap-[10px]">
              <View className="flex-1 flex-row gap-[10px] items-center">
                <Image
                  source={require("@/assets/images/authentication.png")}
                  className="w-[42px] h-[42px] rounded-full"
                ></Image>
                <View>
                  <Text className="text-[#fff] text-[18px]">
                    {t("authIndex.basic_certification")}
                  </Text>
                  <Text className="text-[#949494] text-[14px]">
                    {t("authIndex.after_certification_withdraw")}
                  </Text>
                </View>
              </View>
              <Text className="w-[80px] bg-[#478CFE] h-[30px] rounded-[25px] text-center leading-[30px] text-[14px] text-[#fff]">
                {!certificationStatus
                  ? t("authIndex.go_to_certify")
                  : status[certificationStatus[0].certificationStatus]}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
        <View className="mt-[13px]">
          <TouchableOpacity
            onPress={() => {
              router.push("/authentication/Recognition");
            }}
          >
            <View className="bg-[#1C1C1E] p-[18px] rounded-[10px] flex-row justify-between gap-[10px]">
              <View className="flex-1 flex-row gap-[10px] items-center">
                <Image
                  source={require("@/assets/images/authentication.png")}
                  className="w-[42px] h-[42px] rounded-full"
                ></Image>
                <View>
                  <Text className="text-[#fff] text-[18px]">
                    {t("authIndex.video_certification")}
                  </Text>
                  <Text className="text-[#949494] text-[14px]">
                    {t("authIndex.increase_withdrawal_limit")}
                  </Text>
                </View>
              </View>
              <Text className="text-[14px] text-[#949494]">
                {!certificationStatus ||
                Number(certificationStatus[0].certificationStatus) === 1
                  ? t("authIndex.complete_basic_certification_first")
                  : t("authIndex.go_to_certify")}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </PageContainer>
  );
}
